<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Data</title>
</head>
<body>
    <table id="data-table" border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>Username</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody>
            <!-- 动态内容将插入到这里 -->
        </tbody>
    </table>

    <script>
        // 假设这是从服务器获取的数据（在实际情况下，这通常是通过AJAX请求获得的）
        const data = [
            {'id': 1, 'username': 'admin', 'time': '2024-10-11T19:59:45'}, // 注意：这里时间应该是字符串，或者需要在客户端转换为字符串
            {'id': 2, 'username': 'chen', 'time': '2024-10-11T20:00:18'}
        ];

        // 获取表格的tbody元素
        const tbody = document.querySelector('#data-table tbody');

        // 遍历数据并创建行
        data.forEach(item => {
            const tr = document.createElement('tr');

            // 创建单元格并设置内容
            const idCell = document.createElement('td');
            idCell.textContent = item.id;
            tr.appendChild(idCell);

            const usernameCell = document.createElement('td');
            usernameCell.textContent = item.username;
            tr.appendChild(usernameCell);

            const timeCell = document.createElement('td');
            // 如果time是字符串，可以直接设置；如果是Date对象，需要转换为可读的格式
            timeCell.textContent = new Date(item.time).toLocaleString(); // 假设item.time是ISO格式的字符串
            tr.appendChild(timeCell);

            // 将行添加到tbody中
            tbody.appendChild(tr);
        });
    </script>
</body>
</html>